import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Modal,
  StatusBar,
  Animated,
} from 'react-native';

const { width, height } = Dimensions.get('window');

interface Car3DViewerProps {
  visible: boolean;
  onClose: () => void;
  carBrand: string;
  carModel: string;
}

const Car3DViewer: React.FC<Car3DViewerProps> = ({
  visible,
  onClose,
  carBrand,
  carModel,
}) => {
  const [currentView, setCurrentView] = useState<'exterior' | 'interior'>('exterior');
  
  // 动画值
  const rotateY = useRef(new Animated.Value(0)).current;
  const scale = useRef(new Animated.Value(1)).current;
  const translateX = useRef(new Animated.Value(0)).current;
  const translateY = useRef(new Animated.Value(0)).current;
  
  // 手势状态
  const lastPanRef = useRef({ x: 0, y: 0 });
  const lastScaleRef = useRef(1);
  const lastRotationRef = useRef(0);

  const switchView = (view: 'exterior' | 'interior') => {
    setCurrentView(view);
    // 切换视图时重置变换
    resetView();
  };

  const resetView = () => {
    Animated.parallel([
      Animated.timing(rotateY, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(scale, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(translateX, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  };

  const handleClose = () => {
    setCurrentView('exterior');
    resetView();
    onClose();
  };

  // 3D变换样式
  const carTransform = {
    transform: [
      { perspective: 1000 },
      { rotateY: rotateY.interpolate({
        inputRange: [-180, 180],
        outputRange: ['-180deg', '180deg'],
      })},
      { scale: scale },
      { translateX: translateX },
      { translateY: translateY },
    ],
  };

  return (
    <Modal
      visible={visible}
      transparent={false}
      animationType="slide"
      statusBarTranslucent
    >
      <StatusBar backgroundColor="#000" barStyle="light-content" />
      <View style={styles.container}>
        {/* 顶部导航栏 */}
        <View style={styles.header}>
          <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
            <Text style={styles.closeButtonText}>✕</Text>
          </TouchableOpacity>
          <Text style={styles.title}>
            {carBrand} {carModel} - 3D查看器
          </Text>
          <View style={styles.headerSpacer} />
        </View>

        {/* 3D车辆展示区域 */}
        <View style={styles.viewerContainer}>
          <Animated.View style={[styles.carContainer, carTransform]}>
            <View style={[
              styles.carView,
              currentView === 'exterior' ? styles.exteriorView : styles.interiorView
            ]}>
              <Text style={styles.carEmoji}>
                {currentView === 'exterior' ? '🚗' : '🚙'}
              </Text>
              <Text style={styles.carTitle}>
                {carBrand} {carModel}
              </Text>
              <Text style={styles.carSubtitle}>
                {currentView === 'exterior' ? '外观视图' : '内饰视图'}
              </Text>
            </View>
          </Animated.View>
        </View>

        {/* 控制按钮 */}
        <View style={styles.controls}>
          <TouchableOpacity
            style={[
              styles.controlBtn,
              currentView === 'exterior' && styles.activeControlBtn
            ]}
            onPress={() => switchView('exterior')}
          >
            <Text style={styles.controlBtnText}>外观</Text>
          </TouchableOpacity>
          
          <TouchableOpacity
            style={[
              styles.controlBtn,
              currentView === 'interior' && styles.activeControlBtn
            ]}
            onPress={() => switchView('interior')}
          >
            <Text style={styles.controlBtnText}>内饰</Text>
          </TouchableOpacity>
          
          <TouchableOpacity
            style={styles.controlBtn}
            onPress={resetView}
          >
            <Text style={styles.controlBtnText}>重置</Text>
          </TouchableOpacity>
        </View>

        {/* 操作提示 */}
        <View style={styles.instructions}>
          <Text style={styles.instructionText}>
            💡 操作提示：点击按钮切换视图，重置按钮恢复初始状态
          </Text>
        </View>

        {/* 信息面板 */}
        <View style={styles.infoPanel}>
          <Text style={styles.infoTitle}>车辆信息</Text>
          <Text style={styles.infoText}>品牌：{carBrand}</Text>
          <Text style={styles.infoText}>型号：{carModel}</Text>
          <Text style={styles.infoText}>当前视角：{currentView === 'exterior' ? '外观' : '内饰'}</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 50,
    paddingBottom: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
  closeButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  closeButtonText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  title: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    flex: 1,
    textAlign: 'center',
  },
  headerSpacer: {
    width: 40,
  },
  viewerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.9)',
  },
  carContainer: {
    width: 300,
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
  },
  carView: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
    borderWidth: 2,
    borderColor: 'rgba(255, 255, 255, 0.3)',
  },
  exteriorView: {
    backgroundColor: '#ff6b6b',
  },
  interiorView: {
    backgroundColor: '#4ecdc4',
  },
  carEmoji: {
    fontSize: 80,
    marginBottom: 20,
  },
  carTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    textAlign: 'center',
    marginBottom: 10,
  },
  carSubtitle: {
    fontSize: 16,
    color: '#fff',
    opacity: 0.8,
    textAlign: 'center',
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    gap: 20,
  },
  controlBtn: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    borderRadius: 25,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.3)',
  },
  activeControlBtn: {
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    borderColor: 'rgba(255, 255, 255, 0.6)',
  },
  controlBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  instructions: {
    padding: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    alignItems: 'center',
  },
  instructionText: {
    color: '#fff',
    fontSize: 14,
    textAlign: 'center',
    opacity: 0.8,
  },
  infoPanel: {
    position: 'absolute',
    top: 120,
    right: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    padding: 15,
    borderRadius: 10,
    minWidth: 150,
  },
  infoTitle: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  infoText: {
    color: '#fff',
    fontSize: 12,
    marginBottom: 5,
    opacity: 0.8,
  },
});

export default Car3DViewer; 